<html>
<head>
	<title>College Maps</title>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHAERyLslel_tvNa7gbVrlBTLfYlqiwJdF0-vhJjdkE4j1KnbEhTcRIMAZdRgCneWK9r8q2xLJ_-XYg"
		type="text/javascript"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
		google.load("gdata", "1.x");
		google.setOnLoadCallback(init);
		
		function init() {
			initCalendar();
			initContacts();
			initMap();
		}

		function toggle(id) {
			var div = document.getElementById(id);
			if (div.style.display == "none") {
				div.style.display = "block";
			} else {
				div.style.display = "none";
			}
		}
	</script>
	<script type="text/javascript" src="calendar.js"></script>	
	<script type="text/javascript" src="contacts.js"></script>
	<script type="text/javascript" src="map.js"></script>
	<style type="text/css">
		body{
			background-color: black;
			color:white;
			}
		h1 {
			font-family: verdana;
			font-size: 24px;
			text-align: center;
		}
		#map {
			width: 80%;
			height: 80%;
			border: 5px double green;
			position: absolute;
			top: 10%;
			left: 10%;
			z-index: 1;
		}
		#calendar {
			width: 20%;
			height: 80%;
			background-color: white;
			border: 5px double green;
			position: absolute;
			top: 10%;
			left: 10%;	
			z-index: 2;
		}
		#contacts {
			width: 20%;
			height: 80%;
			background-color: white;
			border: 5px double green;
			position: absolute;
			top: 10%;
			left: 70%;
			z-index: 2;
		}
		#popup {
			width: 40%;
			height: 40%;
			background-color: white;
			border: 3px solid black;
			padding: 8px;
			position: fixed;
			top: 30%;
			left: 30%;
			z-index: 3;			
		}
		#popup a {
			white-space: nowrap;
		}
		.horizontal {
			margin: 0px;
			padding: 0px;
		}
		.horizontal li {
			list-style-type: none;
			list-style-position: inside;
			float: left;
			margin: 0px 0px 0px 0px;
			padding: 0px;
			color: black;
		}
		.login {
			width: 100%;
			font-size: 11px;
			text-align: center;
			display: block;
		}
		#navbar {
			position: absolute;
			top: 50px;
			left: 10%;
			margin:0;
			padding:0;
			font-family:Tahoma;
			font-size:13px;
			font-weight:bold;
			color:black;
			text-decoration: none;
			}
		#navbar li {
			color: #000000;
			background: transparent url('tab.gif') repeat;
			text-decoration: none;	
			padding: 8px 11px;
			border-top: 1px solid #d3bdbe;
			border-bottom: 3px solid #008000;
			border-left: 1px solid #d3bdbe;
			border-right: 1px solid #d3bdbe;
			display:inline;
			}
		#navbar li a{
			color:#000000;
			}
		#navbar li:hover{
			color: #000000;
			background: transparent url('tabhover.gif') repeat;
			}
		#login {
			position: absolute;
			top: 20px;
			right: 10%;
			margin-right: -40px;
			}
		#auth {
			width: 1px;
			height: 1px;
			display: none;
			}	
		#title {
			position: absolute;
			left:0px;
			top:150px;
			}
		#titleb {
			position: absolute;
			right:0px;
			top: 150px;
			}
		#direction {
			position: absolute;
			left:150px;
			bottom:10px;
			font-size:21px;
			}
		th {
			text-align: left;
		}
		.titleLabel {
			background-color: #DFD;
			height: 31px;
			border-bottom: 1px solid #8B8;
			margin-bottom: 8px;
			padding: 0px 8px 0px 8px;
		}
		.placement {
			overflow: hidden;
		}
	</style>
</head>
<body onunload="GUnload()">
	<img id="auth" src="auth.gif" />
	<img id="title" src="campusmaps.png"/>
	<img id="titleb" src="campusmaps.png"/>
	<ul id="navbar" class="horizontal">
		<li><a href="javascript:toggle('calendar')" alt="Click to show Calendar next to map">Calendar</a> <a id="calendarEdit" href="javascript:editMode('calendar')">[+]</a></li>
		<li><a href="javascript:toggle('contacts')"alt="Click to show Contacts next to map">Contacts</a> <a id="contactsEdit" href="javascript:editMode('contacts')">[+]</a></li>
	</ul>
	<div id="map"></div>
	<div id="calendar" style="display: none;">
		<h1>Calendar</h1>
		<a class="login" href="javascript:allowCalendar()">Allow CollegeMaps to use my Google Calendar account</a>
	</div>
	<div id="contacts" style="display: none;">
		<h1>Contacts</h1>
		<a class="login" href="javascript:allowContacts()">Allow CollegeMaps to use my Google Contacts account</a>
	</div>
	<div id="direction">
	To navigate the site, click on the tabs above the map. The site allows you to add locations on the map from events in your calendar.<br>
	The site also allows you to mark the address of contacts in your gmail account. You can also add notes to each marker on the map.<br>
	</div>
</body>
</html>